<template>
  <div class="home">
    <section class="hero">
      <div class="hero-content">
        <h1>端午节文化传承</h1>
        <p>纪念屈原 · 赛龙舟 · 吃粽子 · 佩香囊</p>
        <router-link to="/about" class="btn">了解更多</router-link>
      </div>
    </section>
    
    <section class="features">
      <div class="container">
        <h2 class="section-title">端午节特色</h2>
        <div class="features-grid">
          <AnimatedElement v-for="(feature, index) in features" :key="index" class="feature-card">
            <div class="feature-icon">{{ feature.icon }}</div>
            <h3>{{ feature.title }}</h3>
            <p>{{ feature.description }}</p>
          </AnimatedElement>
        </div>
      </div>
    </section>
    
    <section class="highlights">
      <div class="container">
        <h2 class="section-title">端午节活动</h2>
        <div class="highlight-cards">
          <div v-for="(highlight, index) in highlights" :key="index" class="highlight-card">
            <img :src="highlight.image" :alt="highlight.title" class="highlight-image">
            <div class="highlight-content">
              <h3>{{ highlight.title }}</h3>
              <p>{{ highlight.description }}</p>
              <router-link :to="highlight.link" class="btn">查看详情</router-link>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import AnimatedElement from '@/components/AnimatedElement.vue'

export default {
  name: 'Home',
  components: {
    AnimatedElement
  },
  data() {
    return {
      features: [
        { icon: '🏮', title: '传统习俗', description: '端午节有赛龙舟、吃粽子、挂艾草、佩香囊等丰富多彩的习俗活动。' },
        { icon: '📜', title: '文化内涵', description: '纪念爱国诗人屈原，传承中华民族的优秀传统文化。' },
        { icon: '🍙', title: '特色美食', description: '粽子是端午节最具代表性的食品，各地有不同的风味和做法。' }
      ],
      highlights: [
        { 
          title: '龙舟竞赛', 
          description: '体验激动人心的龙舟比赛，感受团队合作的力量。', 
          image: 'https://static.fotor.com.cn/assets/stickers/3551f61e-b94c-43f7-97b1-a4cf30561ca5_thumb.png',
          link: '/events' 
        },
        { 
          title: '粽子制作', 
          description: '学习制作传统粽子，了解不同地区的粽子特色。', 
          image: 'https://ts1.tc.mm.bing.net/th/id/R-C.8cf1bc5edb75929855b9db32179dedc3?rik=OQqXRdtSbCiZfw&riu=http%3a%2f%2fzjjcmspublic.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn%2fjcms_files%2fjcms1%2fweb2905%2fsite%2fpicture%2f0%2f1906041053488129085.jpg&ehk=%2bs6nebhO9201ahugd8u7TBRU0D4zSeatzuFPzAawgzQ%3d&risl=&pid=ImgRaw&r=0',
          link: '/recipes' 
        },
        { 
          title: '端午商品', 
          description: '购买端午节特色商品，包括粽子、香囊、艾草等。', 
          image: 'https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
          link: '/shop' 
        }
      ]
    }
  }
}
</script>

<style scoped>
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
              url('https://bpic.588ku.com/back_pic/06/15/65/31628b96bacc0d8.jpg');
  background-size: cover;
  background-position: center;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  position: relative;
}

.hero-content h1 {
  font-size: 4rem;
  margin-bottom: 20px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.5rem;
  margin-bottom: 30px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.features {
  padding: 80px 0;
  background-color: var(--light-color);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.feature-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  margin-bottom: 15px;
  color: var(--primary-color);
}

.highlights {
  padding: 80px 0;
  background-color: #f5f5f5;
}

.highlight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.highlight-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.highlight-card:hover {
  transform: translateY(-10px);
}

.highlight-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.highlight-content {
  padding: 20px;
}

.highlight-content h3 {
  margin-bottom: 10px;
}

.highlight-content p {
  margin-bottom: 20px;
  color: #666;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  
  .hero-content p {
    font-size: 1.2rem;
  }
}
</style>